import { defineStore } from 'pinia'

// 1.定义并到处容器
// 参数1：容器的  ID ，必须是唯一的，将来 Pinia会把所有的容器挂载到根容器
// 参数2：选项容器
// 返回值是一个函数，调用得到容器实例
export const useMainStore = defineStore('main',{

  /**
   * 类似于组件的，data，用来存储全局状态的
   * 1.必须是函数，这样是为了在服务端渲染的时候，避免交叉请求导致的数据状态污染
   * 2.必须是箭头函数，这是为了更好的TS类型推导
   */
  state:()=>{
    return {
      count:100,
      foo:'bar',
      arr:[1,2,3,'']
    }
  },

  /**
   * 类似于组件的，computed，用来封装计算属性，有缓存功能
   */
  getters:{
    // 函数接受一个可选参数,state 状态对象,可以自动推导出函数的返回值类型  (只访问自己的state,推荐)
    count10(state){
      console.log('count10调用了');
      return state.count+10
    },

    // 如果在  getters  中使用了 this 则必须手动指定函数返回的类型，否则ts自己推到不出来  (访问其他的getters,推荐)
    count20():number{
      console.log('count10调用了');
      return this.count+10
    }
  },


  /**
   * 类似于组件的，methods，封装业务逻辑，修改state
   */
  actions:{
    // 注意，不要用箭头函数定义action，因为箭头函数绑定外部this。this指向就有问题了
    changeState(num:number,num2:number){
      this.arr.push('传的参数1：num', num,'直接调用actions中的，changeState函数'),
      this.foo = '逻辑比较多的时候封装到 action 做处理'
      this.count+=num2

      // this.$patch({})
      // this.$patch(state=>{})
      // 以上两种写法优缺点在组件中使用一样
    }
  },
  // localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
  // localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 
  // sessionStorage 数据保存在当前会话中，该数据对象临时保存同一窗口 (或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
  // 推荐使用sessionStorage
  // persist:true
  persist:{
    storage:sessionStorage,   //  持久化的引擎，修改为sessionStorage 默认是localStorage
    paths: ['count','foo','arr']      //  存储数据的名称，不只是state数据
  }
})

// 2.使用容器中的 state

// 3.修改  state

// 4.容器中的  action 的使用